<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/style-zj.css">
</head>
<body class="bg_fe">
<header>云家故事</header>
<div class="search-con  mart-44">
    <div class="z-more">
        <div class="search-head">
            <span class="chooseArea"><i class="dinwei-icon"></i><b class="text-area">南京</b></span>
            <div class="input-c">
                <i class="search-png"></i>
                <input type="text" placeholder="请输入关键字搜索" v-model="keyword" @keyup.13="search">
            </div>
        </div>
        <div class="toggle-item p-r">
            <div class="item js-allbtn" data-status="0"><span class="js-showname1">全部分类</span><i
                    class="down-icon icon-sty1"></i></div>
            <div class="item js-storebtn" data-status="0"><span class="js-showname2">品牌</span><i
                    class="down-icon icon-sty1"></i></div>
            <div class="item ai_sort" data-status="0" @click="sort">智能排序<i class="down-icon icon-sty1"></i></div>
            <!--全部分类-->
            <div class="class-content-class modal-class modal-class-all">
                <div class="styl-box">
                    <ul class="level-1">
                        <li :class="index == 0?'js-choose0 act':'js-choose0'"
                            v-for="(items,index) in classifyList" :classId="items.id">
                            <div>{{items.name}}</div>
                            <ul class="level-2">
                                <li class="js-choose" v-for="item in items.children" :classId="item.id">
                                    {{item.name}}
                                </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </div>
            <!--门店-->
            <div class="class-content-class modal-class modal-class-store">
                <div class="styl-box">
                    <ul class="list">
                        <li class="item js-choose1" v-for="item in brandList" :brandId="item.id">{{item.name}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="data-love">
                <div class="li" v-for="items in storeList">
                    <div class="over-h p-r go-storedetail" :storeId="items.id">
                        <div class="png-sty"><img :src="imgBaseurl + items.logoId" alt=""></div>
                        <div class="text-c">
                            <div class="marb-2"><span>{{items.name}}</span><i class="icon-lov love-icon"></i></div>
                            <div class="marb-2">
                                <i class="dinwei-icon"></i>
                                <span class="area-t color-97">{{items.address}}</span>
                            </div>
                            <div>
                                <span class="btn-status" v-for="item in items.label">{{item}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="child-data">
                        <div class="item to_product" :productId="item.id"  v-for="item in items.productList">
                            <div class="marb-5">
                                <span class="money-sty red-act">￥{{item.nowPrice}}</span>
                                <span class="status-ms">
                            <i class="miaosha-icon"></i>&nbsp;秒杀
                        </span>
                                <span>{{item.name}}</span>
                            </div>
                            <div><span class="money-sty money-sty1">￥{{item.price}}</span><span>已售{{item.saleNum}}</span></div>
                        </div>
                    </div>
                    <div class="look-more" :storeId="items.id"><a>查看更多>></a></div>
                </div>
                <div class="no_list" v-if="storeList.length == 0">—— 暂无数据 ——</div>
            </div>
        </div>
    </div>
    <!--全部分类模态框-->
    <div class="modal-class">
        <div class="men-cen"></div>
    </div>
    <div class="area_list_model">
        <header><a class="icon_back_2"></a>云家故事</header>
        <div class="head_height"></div>
        <div class="title">所有城市</div>
        <ul>
            <li v-for="item in cityList">{{item.city}}</li>
        </ul>
    </div>
</div>


</body>
<script src="../js/mui.min.js"></script>
<script src="../js/config.js"></script>


<script>
    var lit;
    var lat;
    var city = "南京";
    var keyword;
    var classifyId = 0;
    var brandId = 0;
    var sort = 1;
    var limit = 10;
    var page = 1;
    //选择分类一级
    $(document).on('click', '.js-choose0', function () {
        classifyId = $(this).attr("classId");
        $(this).addClass('act').siblings().removeClass('act');
        $(".level-2").hide();
        $(this).find(".level-2").show();
    })
    //选择分类
    $(document).on('click', '.js-choose', function () {
        classifyId = $(this).attr("classId");
        //$('.js-showname1').html($(this).html());
        $(this).addClass('act').siblings().removeClass('act');
        page = 1;
        getStoreList();
        modelHide();
    })

    //选择门店
    $(document).on('click', '.js-choose1', function () {
//        $('.js-showname2').html($(this).html());
        brandId = $(this).attr("brandId");
        $(this).addClass('act').siblings().removeClass('act');
        page = 1;
        getStoreList();
        modelHide();
    })


    //跳转门店详情
    mui(document).on('tap', '.go-storedetail,.look-more', function () {
        var storeId = $(this).attr("storeId");
        window.location.href = 'store-detail.html?storeId='+storeId;
    })


    mui(document).on('tap', '.to_product', function () {
        var productId = $(this).attr("productId");
        window.location.href = 'product.html?productId='+productId;
    })
    //切换-ui
    $(document).on('click', '.js-allbtn', function () {
        $('.modal-class-store').hide();
        $('.modal-class-all').is(':hidden')?$('.men-cen').show():$('.men-cen').hide();
        $('.modal-class-all').slideToggle();
        $(this).toggleClass("active").siblings(".item").removeClass("active");
    })
    $(document).on('click', '.js-storebtn', function () {
        $('.modal-class-all').hide();
        $(this).toggleClass("active").siblings(".item").removeClass("active");;
        $('.modal-class-store').is(':hidden')?$('.men-cen').show():$('.men-cen').hide();
        $('.modal-class-store').slideToggle();
    })

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });

    function pulldownRefresh() {
        location.reload();
//        setTimeout(function() {
//            var table = document.body.querySelector('.mui-table-view');
//            var cells = document.body.querySelectorAll('.mui-table-view-cell');
//            for (var i = cells.length, len = i + 3; i < len; i++) {
//                var li = document.createElement('li');
//                li.className = 'mui-table-view-cell';
//                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//                //下拉刷新，新纪录插到最前面；
//                table.insertBefore(li, table.firstChild);
//            }
//
//        }, 1500);
    }
    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        getStoreList()
        //refresh completed
    }

    var app = new Vue({
        el: '.search-con',
        data: {
            classifyList: "",
            brandList: "",
            storeList:[],
            imgBaseurl:imgBaseurl,
            cityList:'',
            keyword:'',
        },
        beforeCreate: function () {
            var that = this;
            get_ajax("common/classifyList", {}, function (data) {
                var data = data.classifyList;
                that.classifyList = data;
            });
            get_ajax("common/brandList", {}, function (data) {
                var data = data.brandList;
                app.brandList = data;
            });
            get_ajax("common/getCityList", {}, function (data) {
                var data = data.list;
                app.cityList = data;
            });
            getStoreList();
        },
        updated: function () {

        },
        methods: {
            choose0: function (id) {
                this.id = id;
            },
            search:function () {
                keyword = this.keyword;
                page = 1;
                getStoreList();
            },
            sort:function () {
                $(".ai_sort").toggleClass("active").siblings(".item").removeClass("active");
                page = 1;
                sort = sort == 1?2:1;
                getStoreList();
                modelHide()
            }
        }
    })

    function getStoreList() {
        var sendData = {
            lit: 31.26249,
            lat: 120.63212,
            city: city,
            keyword: keyword,
            classifyId: classifyId,
            brandId: brandId,
            sort: sort,
            limit: limit,
            page: page,
        }
        get_ajax("store/getStoreList", sendData, function (data) {
            var data = data.storeExlist;
            data.forEach(function (items) {
                items.label = items.label.split(",");
            });
            app.storeList = page == 1?data:app.storeList.concat(data);
            mui('#pullrefresh').pullRefresh().endPullupToRefresh();
            data.length == 0?mui.toast("没有更多数据了"):page++;
        });
    }

    //地址选择
    $(document).on('click', '.icon_back_2', function () {
        $(".area_list_model").show().css("left","100%");
    })
    $(document).on('click', '.chooseArea', function () {
        $(".area_list_model").show().css("left","0");
    })
    $(document).on('click', '.area_list_model ul li', function () {
        $(".area_list_model").hide().css("left","100%");
        var area = $(this).text();
        $(".search-con .search-head .text-area").text(area);
        city = area;page = 1;
        getStoreList();
    })

    $(document).on('click', '.men-cen', function () {
        modelHide();
        $(".toggle-item .item").removeClass("active");
    });

    function modelHide() {
        $('.modal-class-all,.modal-class-store,.men-cen').hide();
    }
</script>
</html>